<template>
    <div id="arrange">
        <div class="thump-container flex-center" ref="thumpContainer">
            <draggable class="thump-drag flex-center" draggable=".content" :options="bottomOptions" :data-index="-1">
                <img ref="arrangeImg" class="arrange-img" :src="arrangeSrc" alt="">
            </draggable>
            <div v-for="(item, index) in hotZone" :key="index">
                <draggable class="hotZone-con" draggable=".content"  :options="bottomOptions" ref="hotZone" :data-index="index">
                    <transition name="hotZone">
                        <div class="hotZone" v-if="!item.isRight"></div>
                    </transition>
                </draggable>
            </div>
        </div>
        <bottom-handle :noOverflow.sync="noOverflow" :contentNum.sync="contentNum">
            <draggable ref="drag" class="flex-start" v-model="copyContentList" :move="onMove" @end="onEnd" :options="bottomOptions">
                <div class="content pointer flex-center" :data-index="index" :data-id="item.id" v-for="(item, index) in copyContentList" :key="index">
                    {{item.content}}
                </div>
            </draggable>
        </bottom-handle>
    </div>
</template>

<script>
import bottomHandle from '../../components/bottomHandle'
import draggable from "vuedraggable"
import classify from '../../mixin/classify'
import bus from '../../../content/assets/js/bus'
export default {
    name: "Arrange",
    components: { draggable, bottomHandle },
    mixins: [classify],
    data() {
        return {
            bottomOptions: {
                group: "collection",
                forceFallback: true,
                sort: false,
            },
            noOverflow: false,
            copyContentList: [],
            targetDomIndex: -1,
            contentNum: 0
        }
    },
    created() {
        this.copyContentList = JSON.parse(JSON.stringify(this.description.waitingForSelect))
    },
    computed: {
        arrangeSrc() {
            if (this.description.classifyArea) {
                let suffix = this.getFileSuffix(this.description.classifyArea[0].localName)
                let src = this.description.classifyArea[0].localName
                return window.$DATADIR + `resc/Collection/${this.id}/${src.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, suffix)}`
            }
        },
        hotZone() {
            if (this.description.classifyArea) {
                this.description.classifyArea[0].hotZone.map(v => {
                    this.$set(v, 'isRight', false)
                })
                return this.description.classifyArea[0].hotZone
            }
        }
    },
    mounted() {
        console.log('Arrange');
        this.$nextTick(() => {
            if (this.noOverflow) {
                this.restDragMaxWidth(this.$refs.drag.$el)
            }
            let time = setInterval(() => {
                try {
                    let rect = this.$refs.arrangeImg.getBoundingClientRect()
                    let width = rect.width
                    if (width !== 0) {
                        let height = rect.height
                        let x = rect.x - this.$refs.thumpContainer.getBoundingClientRect().x
                        clearInterval(time)
                        this.restHotzone(width, height, x)
                    }
                } catch (error) {
                    clearInterval(time)
                }
            }, 100)
        })
    },
    methods: {
        restHotzone(width, height, x) {
            this.$refs.hotZone.forEach((v, i) => {
                v.$el.style.width = this.hotZone[i].areaWidth * width + 'px'
                v.$el.style.height = this.hotZone[i].areaHeight * height + 'px'
                v.$el.style.left = this.hotZone[i].pointX * width + x + 'px'
                v.$el.style.top = this.hotZone[i].pointY * height + 'px'
            })
        },
        onMove(customEvent) {
            this.targetDomIndex = parseInt(customEvent.to.dataset.index)
            console.log(this.targetDomIndex)
            return false
        },
        onEnd(customEvent) {
            console.log(customEvent)
            if (this.targetDomIndex === -1) return
            let answer = this.hotZone[this.targetDomIndex].answer
            if (!answer) return
            let answerId = parseInt(customEvent.item.dataset.id)
            let answerIndex = parseInt(customEvent.item.dataset.index)
            console.log(answer.includes(answerId))
            if (answer.includes(answerId)) {
                this.hotZone[this.targetDomIndex].isRight = true
                this.copyContentList.splice(answerIndex, 1)
            }
            if (!this.noOverflow) {
                if (this.copyimgList.length <= this.contentNum) {
                    this.noOverflow = true
                }
            }
            if (this.noOverflow) {
                this.$nextTick(() => {
                    this.restDragMaxWidth(this.$refs.drag.$el)
                })
            }
        },
    }
}
</script>

<style lang="scss">
.hotZone-leave-active {
    transition: opacity 1s;
}
.hotZone-enter,
.hotZone-leave-to {
    opacity: 0;
}
#arrange {
    .thump-container {
        font-size: 16px;
        height: 33.6vw;
        width: 77.78vw;
        margin: 0px auto;
        background: #fff;
        border-radius: 10px;
        position: relative;
        .thump-drag {
            width: 38.86vw;
            height: 100%;
        }
        .arrange-img {
            height: 100%;
            width: 100%;
            border-radius: 10px;
            animation: startHidden 1s linear 1;
        }
        .hotZone-con {
            position: absolute;
        }
        .hotZone {
            background-color: #fff;
            width: 100%;
            height: 100%;
        }
    }
    .content {
        min-width: 12.5vw;
        min-height: 12.5vw;
        max-width: 12.5vw;
        max-height: 12.5vw;
        background: rgba(252, 253, 254, 1);
        border: 4px solid rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 0px 0px rgba(95, 171, 255, 0.2);
        border-radius: 10px;
        font-weight: 500;
        font-size: 1.8vw;
        color: #303133;
        text-align: center;
        &:not(:last-child) {
            margin-right: 30px;
        }
    }
    @keyframes startHidden {
        0%{
            opacity: 0;
        }
        20%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
    @media screen and(max-width: 1439px) {
        .thump-container {
            font-size: 12px;
            height: 33.6vw;
        }
        .content {
            width: 9.3vw;
            height: 9.3vw;
            min-width: 9.3vw;
            min-height: 9.3vw;
            max-width: 9.3vw;
            max-height: 9.3vw;
            &:not(:last-child) {
                margin-right: 20px;
            }
        }
        .drag-list {
            height: 12vw;
            .img {
                width: 9.3vw;
                height: 9.3vw;
                min-width: 9.3vw;
                min-height: 9.3vw;
                max-width: 9.3vw;
                max-height: 9.3vw;
                &:not(:last-child) {
                    margin-right: 20px;
                }
            }
            .icon {
                width: 3vw;
                height: 3vw;
            }
        }
    }
}
</style>
